<template>
    <div class="Myschedule">
        <div class="Myschedule-con">
            <div class="Myschedule-con-head">
                <div>预约课程</div>
                <div>
                    <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    <span class="Myschedule-con-screening">筛选</span>
                </div>
            </div>
            <div class="Myschedule-con-con">
                <ul>
                    <li v-for="(item,index) in MyscheduleList" :key="index">
                        <div class="Myschedule-con-con-detal">
                            <div class="Myschedule-con-con-detal-left">
                                <img :src="item.MyscheduleImg"/>
                            </div>
                            <div class="Myschedule-con-con-detal-right">
                                <label>
                                    <span>{{item.title}}</span>
                                </label>
                                <label>
                                    <span>{{item.level}}</span>
                                    <span>{{item.classroom}}</span>
                                </label>
                                <label>
                                    <span>{{item.language}}</span>
                                </label>
                                <label>
                                    <span>{{item.timedate}}</span>
                                </label>
                                <label>
                                    <span>{{item.timer}}</span>
                                    <span v-if="item.Isclasses" style="color:#FF4E00;padding-right:40px">已开课</span>
                                    <span v-else style="color:#FF4E00;padding-right:40px">未开课</span>
                                </label>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="Lvie-cl-de-con-pagination">
                <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    name:'Myschedule',
    data(){
        return{
            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            MyscheduleList:[
                {
                    MyscheduleImg:'/images/图层 8@2x.png',
                    title:'话题/学习教育',
                    level:'初级',
                    classroom:'007班',
                    language:'阿拉伯语',
                    timedate:'2020-05-15  星期五',
                    timer:'14:00-14:30',
                    Isclasses:false
                },
                {
                    MyscheduleImg:'/images/图层 8@2x.png',
                    title:'话题/学习教育',
                    level:'初级',
                    classroom:'007班',
                    language:'阿拉伯语',
                    timedate:'2020-05-15  星期五',
                    timer:'14:00-14:30',
                    Isclasses:false
                },
                {
                    MyscheduleImg:'/images/图层 8@2x.png',
                    title:'话题/学习教育',
                    level:'初级',
                    classroom:'007班',
                    language:'阿拉伯语',
                    timedate:'2020-05-15  星期五',
                    timer:'14:00-14:30',
                    Isclasses:true
                }
            ]
        }
    }
}
</script>
<style scoped lang="less">
    .Myschedule{
        width: 90%;
        background: #ffffff;
    }
    .Myschedule-con{
        position: relative;
        width: 100%;
    }
    .Myschedule-con-head{
        position: relative;
        width: 90%;
        margin: 0 auto;
        top: 30px;
        height: 30px;
        display: flex;
        flex-flow:  row nowrap;
        justify-content: space-between;
        align-items: center;
    }
    .Myschedule-con-head:first-child{
        border-left: 4px solid #2DC7C8;
        padding-left: 1%;
        color: #2DC7C8;
        font-weight: bold;
    }
    .Myschedule-con-head /deep/ .el-date-editor{//样式穿透时间选择器样式
        width: 80%;
        height: 100%;
        border-radius: 15px;
        border:1px solid rgba(71,206,207,1);
    }
    .Myschedule-con-head /deep/.el-range-input,.Myschedule-con-head /deep/.el-range-separator{
        color: #47CECF;
    }
    /*内容样式*/
    .Myschedule-con-con{
        position: relative;
        width: 90%;
        margin: 0 auto;
        padding-bottom: 100px;
        margin-top: 80px;
        ul{
            list-style: none;
            display: flex;
            padding: 0;
            width: 100%;
            flex-wrap: wrap;
            justify-content: left;
            justify-content: space-between;
            li{
                flex: 0 0 48%;
                height:184px;
                border:1px solid rgba(54,205,206,1);
                border-radius:15px;
                text-align: center;
                box-sizing: border-box;
                margin-top: 40px;               
            }
        }
    }
    .Myschedule-con-con-detal{
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
    }
    .Myschedule-con-con-detal-left{
        width: 36%;
        margin-left: 4%;
        height: 90%;
        img{
            width: 100%;
            height: 100%;
            border-radius: 15px;
        }
    }
    .Myschedule-con-con-detal-right{
        width: 60%;
        height: 90%;
        label{
            display: block;
            text-align: left;
            padding-left: 8%;
            margin-top: 10px;
            font-size: 14px;
        }
    }
    .Myschedule-con-con-detal-right>label:first-child{
        font-size: 22px!important;
        font-weight: bold;
        color: #555555;
        margin-top: 0;
    }
    .Myschedule-con-con-detal-right>label:last-child{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: left;
        justify-content: space-between;
    }
    .Myschedule-con-head /deep/ .el-date-editor{
        width: 80%;
        height: 100%;
    }
    .Myschedule-con-screening{
        display: inline-block;
        width:12%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-left: 2%;
        color: #ffffff;
        background:rgba(71,206,207,1);
        border-radius:8px;
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 100px;
        margin-top: 100px;
        margin-bottom: 40px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
    }
</style>